<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script> -->
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	{{a}}-{{b}}-{{c}}
</div>
<script>
	var data  = {a:2};
	var vm = new Vue({
		el : '#root',
		data : data,
	});
	//vm.a = 2;
	//data.a = 2;
	//以上两句是响应的
	//下面两句是不响应的
	vm.b = 3; 
	data.b = 3;

	//不过，有办法在实例创建之后添加属性并且让它是响应的。
	vm.$set('b',3)
	vm.b = 3;
	console.log(data);//{a:2,b:3}

	//对于普通数据对象，可以使用全局方法 Vue.set(object, key, value)：
	Vue.set(data,'c',4);
	vm.$log();
	//有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：
	//
	// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
	this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
	console.log(this.someObject);
	console.log(this);//window
</script>	
</body>
</html>